<template>
    <view class="activity-wrap coreshop-padding-10 coreshop-margin-10 coreshop-bg-white coreshop-border-radius-trbl-18" v-if="count">
        <view class="coreshop-padding-bottom-10 coreshop-padding-top-10 groupon-title coreshop-min-height-30">
            <view class="title-box coreshop-flex coreshop-justify-between">
                <view class="coreshop-font-16 coreshop-text-black coreshop-font-weight-bold">每日拼团</view>
                <u-icon name="arrow-right-double" size="12" label="查看更多" labelSize="12" labelPos="left" @tap="goPinTuanList()"></u-icon>
            </view>
        </view>
        <view class="coreshop-divider">
            <view class="complete"></view>
        </view>
        <scroll-view class="scroll-box" scroll-x scroll-anchoring>
            <view class="goods-box coreshop-flex  coreshop-justify-between coreshop-text-black">
                <view class="min-goods" v-for="(item, index) in coreshopData.parameters.list" :key="index" @tap="goPinTuanDetail(item.id)">
                    <view class="img-box">
                        <image class="img" :src="item.goodThumbnail" mode=""></image>
                    </view>
                    <view class="item-card-bottom coreshop-padding-10">
                        <view class="goods-title u-line-1">{{ item.name }}</view>
                        <view class="price coreshop-margin-bottom-5">{{item.pinTuanPrice}}</view>

                        <view class="coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between">
                            <view class="original-price">￥{{ item.pinTuanPrice + item.discountAmount }}</view>
                            <view class="coreshop-font-10">
                                <u-tag :text="'限购'+item.maxNums" type="warning" plain plainFill size="mini" v-if="item.maxNums>0"></u-tag>
                                <u-tag text="不限购" type="success" plain plainFill size="mini" v-if="item.maxNums==0"></u-tag>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
    export default {
        name: "coreshopPinTuan",
        props: {
            coreshopData: {
                required: false,
            }
        },
        data() {
            return {
                goodsList: [],
                swiperCurrent: 0
            };
        },
        created() {
            let that = this;
            if (that.coreshopData.parameters.list.length > 0) {
                let arr = that.sortData(that.coreshopData.parameters.list, 4);
                that.goodsList = arr;
            }
        },
        computed: {
            count() {
                return (this.coreshopData.parameters.list.length > 0)
            }
        },
        methods: {
            swiperChange(e) {
                this.swiperCurrent = e.detail.current;
            },
            // 数据分层
            sortData(oArr, length) {
                let arr = [];
                let minArr = [];
                oArr.forEach(c => {
                    if (minArr.length === length) {
                        minArr = [];
                    }
                    if (minArr.length === 0) {
                        arr.push(minArr);
                    }
                    minArr.push(c);
                });
                return arr;
            }
        },
    }
</script>

<style lang="scss" scoped>
    .activity-wrap { background-color: #fff; min-height: 150px; background: linear-gradient(#faecca 20%, #ffffff 30%, #ffffff 100%);
        .groupon-title { background: url($apiFilesUrl+'/static/images/pinTuan/groupon_title_bg.png') no-repeat; background-position: center top; background-size: 100% auto; }
        .title-box {
            .title-text { font-size: 16px; font-weight: bold; color: #333333; }
            .more-box {
                .more-text { font-size: 11px; font-weight: 500; color: #333333; }
                .more-icon { font-size: 12px; color: #333333; }
            }
        }

        .scroll-box,
        .goods-box { min-height: 190px; width: 100%; }
    }

    // 商品卡片
    .min-goods { background: #fffaef; box-shadow: 0px 3.5px 4px 0.5px rgba(162, 117, 27, 0.24); border-radius: 5px; margin-right: 15px !important;
        .img-box { width: 140px; height: 140px; overflow: hidden; position: relative; border-radius: 5px 5px 0 0;
            .img { width: 140px; height: 140px; background-color: #ccc; }
        }
        .item-card-bottom { min-height: 75px; background: url($apiFilesUrl+'/static/images/pinTuan/groupon_goods_bg.png') no-repeat; background-position: bottom center; background-size: 100% 100%; }
        .goods-title { font-size: 13px; font-weight: 500; color: #000000; line-height: 13px; margin-bottom: 5px; }
        .price { font-size: 15px; font-weight: 500; color: #ff0000;
            &::before { content: '￥'; font-size: 12px; }
        }
        .original-price { font-size: 20rpx; font-weight: 500; text-decoration: line-through; color: #c4c4c4; }
        .groupon-num-box {
            .avatar-box { direction: rtl; unicode-bidi: bidi-override; height: 30rpx;
                .avatar-img { width: 30rpx; height: 30rpx; border-radius: 50%; background-color: #f5f5f5; }
            }
            .groupon-num-text { font-size: 18rpx; font-weight: 500; color: #e9b461; }
        }
    }
</style>
